<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="card-header">
          <el-row type="flex" justify="space-between">
            <el-button type="primary" size="small" style="height: 32px" @click="addFn">添加经纪</el-button>
            <el-row type="flex" style="width:50%" class="searcher">
              <!-- <el-select
                v-model="value"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                style="width:100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-input v-model="typeValue" style="width: 100%" placeholder="请输入关键词" />
              <el-button type="info" plain style="width: 56px" @click="submitSearch"><i class="el-icon-search" /></el-button>

            </el-row>
          </el-row>
        </div>
        <el-divider />
        <div class="table">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="image"
              label="图片"
              width="240"
            >
              <template v-slot="{row}">
                <img
                  v-imgErr="require('@/assets/404_images/404.png')"
                  :src="row.image"
                  alt=""
                  style="height:200px;height:240px"
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              label="电话"
            />
            <el-table-column
              prop="address"
              label="地址"
            />
            <el-table-column
              prop="desc"
              label="介绍"
            />
            <el-table-column
              prop=""
              label="操作"
            >
              <template v-slot="{row}">
                <el-button type="primary" size="mini" @click="editAgentFn(row.id)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delAgentFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="2"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <agents-dialog ref="agentsDialog" :showing-dialog.sync="showingDialog" @updateEvent="updateEvent" />
    </div>
  </div>
</template>

<script>
import { getAgentsList, getAgentsListTotal, editAgent, deleteAgent } from '@/api/agents'
// import store from '@/store'
import agentsDialog from './components/dialog.vue'
export default {
  components: {
    agentsDialog
  },
  data() {
    return {
      // options: [],
      typeValue: '',
      // list: [],
      // loading: false,
      // states: [],
      // tableData: this.$store.state.agents.agentsList,
      tableData: [],
      searchQuary: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      },
      showingDialog: false,
      total: 0,
      page: 0
    }
  },
  async created() {
    await this.getData(
      this.searchQuary
    )
  },
  // mounted() {
  //   this.list = this.states.map(item => {
  //     return { value: `value:${item}`, label: `label:${item}` }
  //   })
  // },
  methods: {
    // remoteMethod(query) {
    //   if (query !== '') {
    //     console.log(this.states)
    //     this.loading = true
    //     // setTimeout(() => {
    //     //   this.loading = false
    //     //   this.options = this.list.filter(item => {
    //     //     return item.label.toLowerCase()
    //     //       .indexOf(query.toLowerCase()) > -1
    //     //   })
    //     //   console.log(this.options)
    //     // }, 200)
    //   }
    //   // else {
    //   //   this.options = []
    //   // }
    // },
    async getData(quaryData) {
      // await this.$store.dispatch('agents/getAgentsList', data)
      // 先获取到正确的回显条数
      const totalData = await getAgentsListTotal('')
      // 获取正确的回显最大条数
      this.total = totalData.data
      const res = await getAgentsList(quaryData)
      this.tableData = res.data
      // 获取所有的名字组成数组 用于检索下拉回显
      // this.states = this.tableData.map(v => {
      //   return v.name
      // })
      console.log('tableData', this.tableData)
      console.log('total', this.total)
    },
    // 编辑操作
    async editAgentFn(id) {
      console.log('id', id)
      const res = await editAgent(id)
      // console.log('editDetails', res)
      // 传输数据 实现表单内容回显
      this.$refs.agentsDialog.formData = res.data
      // console.log('editDetails', this.$refs.agentsDialog.formData)
      this.showingDialog = true
    },
    // 删除操作
    async delAgentFn(id) {
      console.log('delId', id)
      if ((this.total) % 2 === 1 && this.page !== 0) {
        this.page--
      }
      await deleteAgent(id)
      this.currentChange(this.page)
      this.$message.warning('删除成功')
    },
    async submitSearch() {
      this.searchQuary.name_contains = this.typeValue
      // console.log('value', this.typeValue)
      await this.getData(this.searchQuary)
      if (!this.tableData.length) {
        this.$message.error('未检索到匹配数据')
      } else {
        // console.log(this.tableData.length)
        this.$message.success(`检索成功。为您检索到${this.tableData.length}条数据`)
      }
      // console.log('value', this.typeValue)
      // this.getData(this.searchQuary)
    },
    // 分页器 页面变化动作
    async currentChange(val) {
      this.page = val
      console.log('page', this.page)
      this.searchQuary = {
        _limit: 2,
        _start: val * 2 - 2,
        name_contains: ''
      }
      console.log(this.searchQuary)
      await this.getData(this.searchQuary)
    },
    addFn() {
      this.showingDialog = true
    },
    updateEvent() {
      this.getData(this.searchQuary)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
